<!-- components/Popup.vue -->

<template>
	<up-overlay :show="show" @click="show = false">
		<view class="content">
			<view class="content-title">
				<text>{{title}}</text>
			</view>
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="handleCancel">
			  <image src="/static/index_slices/fill.png" mode="widthFix"></image>
			</view>
			
			<view >
				<!-- 内容区域 -->
				<view class="content-">
					<text class="content-text">{{ content }}</text>
				</view>
				
				<!-- 自定义按钮区域 -->
				<view class="custom-btns">
				  <button class="confirm-btn"  @click="handleConfirm">{{confirmText}}</button>
				  <text @click="handleCancel">{{cancelText}}</text>
				</view>
			</view>
		</view>
	</up-overlay>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: '提示' },
  content: { type: String, default: '' },
  cancelText: { type: String, default: '我再想想' },
  confirmText: { type: String, default: '确认操作' }
});

const emit = defineEmits(['cancel', 'confirm', 'close']);

const handleCancel = () => {
  emit('cancel');
  emit('close');
};

const handleConfirm = () => {
  emit('confirm');
  emit('close');
};

const handleClose = () => {
  emit('close');
};
</script>

<style scoped lang="scss">
/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  z-index: 999;
  padding: 8rpx;
  image{
	  width: 40rpx;
  }
}
.content{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	width: 660rpx;
	height: 545rpx;
	border-radius: 36rpx;
}
.content-title{
	color: #181A3C;
	font-size: 36rpx;text-align: center;
	font-weight: bold;
	padding-top: 99rpx;
}
/* 内容样式 */
.content-text {
  display: block;
  font-size: 26rpx;
  color: #6D6F81;
  padding: 60rpx 0 45rpx;
  line-height: 1.6;
  text-align: center;
  margin: 0 74rpx;
}

/* 按钮区域 */
.custom-btns {
  margin-top: 0rpx;
  text-align: center;
}

.confirm-btn {
  width: 454rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  border-radius: 44rpx;
  border: 1px solid transparent;
  margin: 0 auto 24rpx;
  background: linear-gradient(to right,#FF5A55,#FD3832);
  color: #fff;
}
.custom-btns{
	text-align: center;
	text{
		color: #B3B3B3;
	}
}
.cancel-btn::v-deep .u-button {
  border: 1px solid #ddd !important;
  color: #333 !important;
  background: #fff !important;
}
</style>